<template>
  <div>
    <a-select v-model="value" mode="multiple" style="width: 30%" placeholder="选择查看的指数类型" option-label-prop="label">
      <a-select-option v-for="(item, index) in weatherIndex" :key="index" :value="item.name" :label="item.name">
        {{ item.name }}
      </a-select-option>
    </a-select>
    <div v-for="(item, index) in IndexInfo" :key="index">
      <h2 style="margin-top: 20px;">天气指数类型: {{ item.name }}</h2>
      <p>{{ item.name }}状态: {{ item.category }}</p>
      <p>建议: {{ item.text }}</p>
      <p>当前时间: {{ item.date }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { mapState } from 'vuex'
import { KEY, API_Indices } from '@/common/constants.js'

export default {
  data() {
    return {
      weatherIndex: {},
      value: ['运动指数'],
      IndexInfo: {}
    }
  },
  computed: {
    ...mapState([
      "location"
    ])
  },
  methods: {
    getData() {
      axios.get(API_Indices, {
        params: {
          key: KEY,
          location: this.location.id,
          type: 0
        }
      }).then(res => {
        // console.log(res);
        this.weatherIndex = res.data.daily;
        this.initIndexInfo();
      })
    },
    initIndexInfo() {
      this.IndexInfo = this.weatherIndex.filter(item => this.value.includes(item.name));
    }
  },
  mounted() {
    this.getData()
    this.initIndexInfo()
  },
  watch: {
    value(newValues) {
      console.log("参数", newValues);
      this.IndexInfo = this.weatherIndex.filter(item => newValues.includes(item.name));
      console.log("指数信息", this.IndexInfo);
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.container {
  padding: 20px;
  background: linear-gradient(to bottom right, #f0f2f5, #ffffff);
  border-radius: 8px;
}

/* 选择框样式 */
:deep(.ant-select) {
  margin-bottom: 20px;
  border-radius: 6px;
}

:deep(.ant-select:hover) {
  border-color: #40a9ff;
}

/* 天气指数卡片样式 */
div[v-for] {
  background: white;
  padding: 15px 20px;
  margin: 15px 0;
  border-radius: 10px;
  border-left: 4px solid #1890ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

div[v-for]:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-left: 4px solid #40a9ff;
}

/* 标题样式 */
h2 {
  font-size: 1.5em;
  color: #1890ff;
  margin-top: 20px;
  font-weight: 600;
}

/* 段落样式 */
p {
  font-size: 1em;
  line-height: 1.6;
  margin: 8px 0;
}

/* 不同类型信息的样式 */
p:nth-child(2) {
  color: #52c41a;  /* 状态显示为绿色 */
}

p:nth-child(3) {
  color: #722ed1;  /* 建议显示为紫色 */
}

p:nth-child(4) {
  color: #faad14;  /* 时间显示为金色 */
}

/* 添加响应式设计 */
@media screen and (max-width: 768px) {
  div[v-for] {
    margin: 10px 0;
    padding: 10px 15px;
  }
  
  h2 {
    font-size: 1.3em;
  }
  
  p {
    font-size: 0.9em;
  }
}
/* 添加过渡效果 */
div {
  transition: all 0.3s ease;
}

/* 鼠标悬停效果 */
div:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>